<template>
  <div class="login">
    <div class="title">
      登录
    </div>
    <el-form
        ref="ruleFormRef"
        status-icon
        label-width="120px"
        class="form"
        :model="userInfo"
        :rules="rules"
    >
      <el-form-item label-width="0" prop="id">
        <el-input v-model="userInfo.id" type="text" placeholder="用户名" maxlength="16" autocomplete="off" />
      </el-form-item>
      <el-form-item label-width="0" prop="password">
        <el-input v-model="userInfo.password" type="password" placeholder="密码" maxlength="32" show-password autocomplete="off" />
      </el-form-item>
    </el-form>
    <div class="login-button" @click="login(ruleFormRef)">
      登录
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store/index.js'
import {ref} from 'vue'
const store = useStore()
const { verified, cookie } = storeToRefs(store)
const ruleFormRef = ref(null)
const userInfo = ref({
  id: '',
  password: ''
})
const rules = ref({
  id: [{ validator: validateId, trigger:['blur'] }],
  password: [{ validator: validatePassword, trigger:['blur'] }]
})
function validateId(rule, value, callback) {
  if(!!value.length) {
    return true
  }else {
    return callback(new Error('请输入用户名！'))
  }
}
function validatePassword(rule, value, callback) {
  if(!!value.length) {
    return true
  }else {
    return callback(new Error('请输入密码！'))
  }
}
function validatePasswordRegister(rule, value, callback) {
  const pattern = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,._])[0-9a-zA-Z!@#$%^&*,._]{8,36}$/;
  if(pattern.test(value)) {
    return true
  }else {
    return callback(new Error('密码必须包含大小写字母,特殊字符和数字，且长度不低于8位。'))
  }
}
function login(formEl) {
  formEl.validate((valid) => {
    if (valid) {
      if(userInfo.value.id==='whu_test'&&userInfo.value.password==='123456'){
        ElMessage({
          message: '验证成功',
          type: 'success',
        })
        store.setCookie('123')
      }else {
        ElMessage({
          message: '密码错误',
          type: 'error',
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.login {
  border: 1px solid #cdcdcd;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  .title {
    margin: 10px 0;
  }
  .form {
    width: 90%;
  }
  .login-button {
    width: 90%;
    color: white;
    background: #51a4ff;
    cursor: pointer;
    padding: 0.5em 0;
    margin: 0 0 10px 0;
    border-radius: 2em;
    transition: 0.2s linear;
    &:hover {
      background: #79baff;
    }
  }
}
</style>
